<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>010-新增全局属性</title>
		<style>
			div {
				width: 500px;
				height: 300px;
			}

			.box1 {
				background-color: pink;
			}

			.box2 {
				background-color: skyblue;
			}
		</style>
	</head>
	<body>
		<!-- contenteditable（表示元素内容是否可编辑）：true 可以 false 不可以 -->
		<div class="box1" contenteditable="true" spellcheck="true">
			Lorem ipsum dolor sit amet consectetur adipisicing elit.
		</div>

		<hr />

		<!-- draggable（表示元素是否可拖动）：true 可以 false 不可以 -->
		<div class="box2" draggable="true">Lorem ipsum dolor sit amet consectetur adipisicing elit.</div>

		<hr />

		<!-- 隐藏元素 hidden -->
		<div hidden>隐藏后，元素不占位</div>
		<div>Lorem ipsum dolor sit amet consectetur adipisicing elit.</div>

		<hr />

		<!-- 对元素进行拼写和语法检查，可选值如下：true 可以 false 不可以 -->
		<div spellcheck="true">对内容进行拼写检查</div>

		<hr />

		<!-- contextmenu 通过JS实现自定义右键菜单  -->
		<div contextmenu>contextmenu 通过JS实现自定义右键菜单</div>

		<hr />

		<!-- data-* 用于存储页面私有属性 -->
		<div data-index="1"></div>
	</body>
</html>
